<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
  <link rel="stylesheet" href="../style.css"/></head>
<body><h1><a href="http://processingjs.org/">Processing.js</a></h1>
<h2>Simple processing.js via JavaScript</h2>

<p>Clock</p>

<p>
<canvas id="canvas1"></canvas>
</p>

<script id="script1" type="text/javascript">

var canvas1 = document.getElementById("canvas1");
var processing = new Processing(canvas1);
processing.size(200, 200);
processing.draw = function() {
  // determine center and max clock arm length
  var centerX = processing.width / 2, centerY = processing.height / 2;
  var maxArmLength = Math.min(centerX, centerY);

  function drawArm(position, lengthScale, weight) {      
    processing.strokeWeight(weight);
    processing.line(centerX, centerY, 
      centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
      centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
  }

  // erase background
  processing.background(224);

  var now = new Date();

  // Moving hours arm by small increments
  var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
  drawArm(hoursPosition, 0.5, 5);

  // Moving minutes arm by small increments
  var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
  drawArm(minutesPosition, 0.80, 3);

  // Moving hour arm by second increments
  var secondsPosition = now.getSeconds() / 60;
  drawArm(secondsPosition, 0.90, 1);
};
processing.loop();
</script>

<div style="height:0px;width:0px;overflow:hidden;"></div>

<pre id="code1"></pre>
<script>
document.getElementById("code1").textContent = document.getElementById("script1").text;
</script>
</body>
</html>
